import React, { useEffect, useState } from 'react'
import { IRouteComponentProps } from "umi"
import "./mail.less"
import { Table } from "antd"
import { ImailList } from "../../utils/interface"
import moment from "moment"
import { useSelector, useDispatch } from "umi"
const mail: React.FC<IRouteComponentProps> = props => {
  const state = useSelector((state: { mail: any }) => state.mail)
  const dispatch = useDispatch()
  let [from, setForm] = useState("")
  let [to, setTo] = useState("")
  let [subject, setsubject] = useState("")
  
  console.log(state);
  
  const columns = [
    {
      title: '发件人',
      dataIndex: "from",
      key: 'from',
      width: 150,
    },
    {
      title: '收件人',
      dataIndex: 'to',
      key: 'to',
      width: 150,
    },
    {
      title: '主题',
      dataIndex: 'subject',
      key: 'subject',
      width: 150,
    },
    {
      title: '发送时间',
      render: (row: ImailList) => {
        return <span>{moment(row.createAt).format('YYYY-MM-DD h:mm:ss')}</span>
      },
      key: 'createAt',
      width: 150,
    },
    {
      title: '操作',
      render: () => {
        return <span>删除</span>
      },
      width: 150,
    },
    {
      fixed: 'right',
      width: 20,
      render: () => <a></a>,
    },
  ];

  useEffect(() => {
    dispatch({
      type: "mail/query",
      payload: { from, to, subject }
    })

  }, [])
function search(from:string,to:string,subject:string){
  console.log( from, to, subject );
  
  dispatch({
    type: "mail/query",
    payload: { from, to, subject }

  })
}
  return <div className="box">
    <div className="header">
      <div className="top">
        <span>发件人：<input type="text" placeholder="请输入发件人" value={from} onChange={e => { setForm(e.target.value) }} /></span>
        <span>收件人：<input type="text" placeholder="请输入收件人" value={to} onChange={e => { setTo(e.target.value) }} /></span>
        <span>主题：<input type="text" placeholder="请输入主题"  value={subject} onChange={e => { setsubject(e.target.value) }}/></span>
      </div>
      <div className="botton">
        <div className="kong"></div>
        <button className="search" onClick={()=>{search(from, to, subject)}}>搜索</button>
        <button onClick={() => { setForm(""), setTo(""), setsubject("")}}>重置</button>
      </div>
    </div>

    <div className="main">
      <Table className="tables" columns={columns as any} dataSource={state.mailList} scroll={{ x: 1500, y: 400 }} />,
    </div>
  </div>

};
export default mail

